<template>
  <div class="foot">
      <ul>
      <li>
        <router-link  exact active-class="active" to="/home">
          <div class="icon">
            <span class="iconfont icon-shouye"></span>
          </div>
          <div class="txt">
            <span>首页</span>
          </div>
        </router-link>
      </li>

      <li>
        <router-link exact active-class="active" to="/explore">
          <div class="icon">
            <span  class="iconfont icon-xinbaniconshangchuan-"></span >
          </div>
          <div class="txt">
            <span>探索</span>
          </div>
        </router-link>
      </li>

      <li>
        <router-link exact active-class="active" to="/novel">
          <div class="icon">
            <span  class="iconfont icon-yuedu"></span >
          </div>
          <div class="txt">
            <span>连载</span>
          </div>
        </router-link>
      </li>

      <li>
        <router-link exact active-class="active" to="/mycenter">
          <div class="icon">
            <span  class="iconfont icon-wode"></span >
          </div>
          <div class="txt">
            <span>我</span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/common/variable.scss";

.foot {
  width: 100%;
  height: 60px;
  left: 0;
  bottom: 0;
  // margin-top: 583px;
  position: absolute;
  background: $bgColor;
  // background-color: blue;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
  ul {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    li {
      flex-grow: 1;
      height: 60px;
      a {
        display: block;
        color: #808080;
        .icon {
          text-align: center;
          span{
            font-size: 18px;
          }
        }
        .txt {
          font-size: 16px;
          text-align: center;
        }
        &.active {
        color: #000;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50% / 100% 100% 0 0;
      }
      }
      
    }
  }
}
</style>